<!DOCTYPE html>
<html
  layout:decorator="components/layout"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  lang="zh-CN"
>
<head>
  <title>客户管理</title>
</head>
<body>
<div
  layout:fragment="content"
  class="container"
  id="app" v-cloak
>
  <div class="container">
    <div class="myHeader">
      <div class="myHeader-title">
        修改用户信息
      </div>
    </div>
    <table
      width="100%"
      border="0"
      class="el-table el-table--border"
      cellspacing="0"
      cellpadding="0"
    >
      <tbody>
      <tr>
        <td
          width="200"
        >客户编号<span style="color:red">*</span></td>
        <td class="ContentTD">
          <el-input
            name="unitName"
            maxlength="50"
            disabled
            v-model="baseCustomer.id"
            v-validate="'required|max:50'"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td
          width="200"
        >单位名称(客户名称)<span style="color:red">*</span></td>
        <td class="ContentTD">
          <el-input
            name="unitName"
            maxlength="50"
            v-model="baseCustomer.unitName"
            v-validate="'required|max:50'"
            placeholder="请填写单位名称"
          ></el-input>
          <div
            id="unitName_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('unitName:required')">请填写单位名称</span>
            <span class="field-error" v-show="errors.has('unitName:max')">单位名称长度最大为 50 位</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <label for="unitNature">单位属性</label>
          <span style="color: red">*</span>
        </td>
        <td>
          <el-select
            v-model="baseCustomer.unitNature"
            v-validate="'required'"
            name="unitNature"
            id="unitNature"
            placeholder="请选择单位属性"
          >
            <el-option
              v-for="[k,v] in fieldFormatter.baseCustomer.unitNatureMap"
              :value="k"
              :key="k"
              :label="v"
            ></el-option>
          </el-select>
          <div
            id="unitNature_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('unitNature:required')">请选择单位属性</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <label for="idcId">所属经营单位</label>
          <span style="color: red">*</span>
        </td>
        <td>
          <el-select
            v-model="baseCustomer.idcId"
            v-validate="'required'"
            name="idcId"
            id="idcId"
            placeholder="请选择所属经营单位"
          >
            <el-option
              v-for="baseOperCompany in baseOperCompanyList"
              :value="baseOperCompany.idcId"
              :key="baseOperCompany.idcId"
              :label="baseOperCompany.operName"
            ></el-option>
          </el-select>
          <div
            id="idcId_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('idcId:required')">请选择所属经营单位</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <label for="idType">证件类型</label>
          <span style="color: red">*</span>
        </td>
        <td>
          <el-select
            v-model="baseCustomer.idType"
            v-validate="'required'"
            id="idType"
            name="idType"
            placeholder="请选择证件类型"
          >
            <el-option
              v-for="[k,v] in fieldFormatter.baseCustomer.idTypeMap"
              :value="k"
              :key="k"
              :label="v"
            ></el-option>
          </el-select>
          <div
            id="idType_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('idType:required')">请选择证件类型</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <label for="idNumber">证件号码</label>
          <span style="color: red">*</span>
        </td>
        <td>
          <el-input
            v-model="baseCustomer.idNumber"
            v-validate="'required|max:50'"
            name="idNumber"
            id="idNumber"
            maxlength="50"
            placeholder="请填写证件号码"
            show-word-limit
          ></el-input>
          <div
            id="idNumber_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('idNumber:required')">请填写证件号码</span>
            <span class="field-error" v-show="errors.has('idNumber:max')">证件号码长度最大为 50 位</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <label for="address">单位地址</label>
          <span style="color: red">*</span>
        </td>
        <td>
          <el-input
            v-model="baseCustomer.address"
            v-validate="'required|max:128'"
            name="address"
            id="address"
            maxlength="128"
            show-word-limit
            placeholder="请填写单位地址"
          ></el-input>
          <div
            id="address_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('address:required')">请填写单位地址</span>
            <span class="field-error" v-show="errors.has('address:max')">单位地址长度最大为 128 位</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <label for="zipCode">邮政编码</label>
          <span style="color: red">*</span>
        </td>
        <td>
          <el-input
            v-model="baseCustomer.zipCode"
            v-validate="'required|zipCode'"
            name="zipCode"
            id="zipCode"
            maxlength="6"
            show-word-limits
            placeholder="请填写邮政编码"
          ></el-input>
          <div
            id="zipCode_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('zipCode:required')">请填写邮政编码</span>
            <span class="field-error" v-show="errors.has('zipCode:zipCode')">{{ errors.first('zipCode') }}</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <label for="officer">安全责任人</label>
          <span style="color: red">*</span></td>
        <td>
          <el-select
            v-model="baseCustomer.officer"
            v-validate="'required'"
            name="officer"
            id="officer"
          >
            <el-option
              v-for="{id,name} in baseHouseOfficerList"
              :value="id"
              :key="id"
              :label="name"
            ></el-option>
          </el-select>
          <div
            id="officerId_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('officer:required')">请选择安全责任人</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <label for="comments">备注</label>
        </td>
        <td>
          <el-input
            v-model="baseCustomer.comments"
            v-validate="'max:200'"
            name="comments"
            id="comments"
            maxlength="200"
            show-word-limit
            placeholder="请填写备注"
          ></el-input>
          <div
            id="comments_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('comments:max')">备注长度最大为 200 位</span>
          </div>
        </td>
      </tr>
      <tr>
        <td
          width="100"
        >
          用户类型
          <span style="color: red">*</span></td>
        <td>
          <el-radio-group v-model="baseCustomer.userType">
            <el-radio :label="1">提供互联网应用服务的用户</el-radio>
            <el-radio :label="2">其它用户</el-radio>
            <el-radio :label="999">其它</el-radio>
          </el-radio-group>
        </td>
      </tr>
      <tr
        v-if="baseCustomer.userType === 2"
      >
        <td>
          <label for="serviceRegTime">服务开通时间</label>
          <span style="color: red">*</span>
        </td>
        <td>
          <el-date-picker
            v-model="baseCustomer.serviceRegTime"
            v-validate="'required'"
            id="serviceRegTime"
            name="serviceRegTime"
            type="date"
            placeholder="请选择服务开通时间"
            size="small"
          >
          </el-date-picker>
          <div
            id="serviceRegTime_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('serviceRegTime:required')">请选择服务开通时间</span>
          </div>
        </td>
      </tr>
      </tbody>
    </table>
    <div class="myHeader" v-if="baseCustomer.userType === 1">
      <div class="myHeader-title">
        应用服务信息
      </div>
    </div>
    <table
      v-if="baseCustomer.userType === 1"
      width="100%"
      border="0"
      class="el-table el-table--border"
      cellspacing="0"
      cellpadding="0"
    >
      <tbody>
      <tr>
        <td
          width="200"
        >
          <label>服务内容</label>
          <span style="color: red">*</span>
        </td>
        <td>
          <!--suppress JSUnresolvedVariable -->
          <el-checkbox-group v-model="baseServiceInfo.serviceContentSet">
            <el-checkbox v-for="[k, v] in fieldFormatter.baseHousesHoldInfo.serviceContentMap"
                         :key="k" :label="k">{{v}}
            </el-checkbox>
          </el-checkbox-group>
          <div
            id="serviceContent_message"
            class="msg"
          >
            <span class="field-error" v-show="serviceContentShow">请选择至少一项网站服务内容</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <label for="setMode">接入方式</label>
          <span style="color: red">*</span></td>
        <td>
          <el-select
            v-model="baseServiceInfo.setMode"
            v-validate="'required'"
            id="setMode"
            name="setMode"
            placeholder="请选择接入方式"
          >
            <el-option
              v-for="[k, v] in fieldFormatter.baseHousesHoldInfo.setModeMap"
              :value="k"
              :key="k"
              :label="v"
            ></el-option>
          </el-select>
          <div
            id="setMode_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('setMode:required')">请选择接入方式</span>
          </div>
        </td>
      </tr>
      <tr>
        <td
          width="100"
        >
          业务类型
          <span style="color: red">*</span></td>
        <td>
          <el-radio-group v-model="baseServiceInfo.businessType">
            <el-radio v-for="[k, v] in fieldFormatter.baseHousesHoldInfo.businessTypeMap" :label="k">{{v}}</el-radio>
          </el-radio-group>
        </td>
      </tr>
      <tr>
        <td>
          <label for="regType">备案类型</label><span style="color: red">*</span>
        </td>
        <td>
          <el-select
            v-model="baseServiceInfo.regType"
            v-validate="'required'"
            id="regType"
            name="regType"
            placeholder="请选择备案类型"
          >
            <el-option
              v-for="[k, v] in fieldFormatter.baseHousesHoldInfo.regTypeMap"
              :value="k"
              :key="k"
              :label="v"
            ></el-option>
          </el-select>
          <div
            id="regType_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('regType:required')">请选择备案类型</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <label for="regId">备案号或许可证号</label>
        </td>
        <td>
          <el-input
            v-model="baseServiceInfo.regId"
            v-validate="'max:64'"
            name="regId"
            id="regId"
            maxlength="64"
            show-word-limit
          ></el-input>
          <div
            id="regId_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('regId:max')">备案号或许可证号长度最大为 64 位</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <label for="domain">域名信息</label>
          <span style="color: red">*</span></td>
        <td>
          <table
            width="100%"
            cellpadding="0"
            cellspacing="0"
            border="0"
            class="el-table el-table--border"
          >
            <tbody>
            <tr>
              <td
                align="left"
                colspan="2"
              >
                <el-row :gutter="10">
                  <el-col :span="20">
                    <el-input
                      v-model="domain"
                      v-validate="'domain'"
                      name="domain"
                      show-word-limit
                      maxlength="100"
                      id="domain"
                      @keyup.enter.native="addDomain"
                    ></el-input>
                  </el-col>
                  <el-col :span="3">
                    <el-button
                      size="small"
                      @click="addDomain"
                      type="primary"
                    >添加
                    </el-button>
                  </el-col>
                </el-row>

                <div
                  id="domain_message"
                  class="msg"
                >
                  <span class="field-error" v-show="errors.has('domain:domain')">{{ errors.first('domain') }}</span>
                </div>
              </td>
            </tr>
            <tr>
              <td
                align="center"
              >
                <input
                  type="hidden"
                  name="Ym"
                  value=""
                  title="请填写服务的域名信息"
                >
                <select
                  v-model="currentSelectDomainList"
                  id="domainList"
                  size="3"
                  class="solid-input"
                  multiple=""
                  style="width:220px;"
                >
                  <option
                    v-for="(baseServiceDomain, i) in baseServiceDomainSet"
                    :key="i"
                  >{{baseServiceDomain.domain}}
                  </option>
                </select>

                &nbsp;
                <el-button
                  @click="deleteDomain"
                  type="danger"
                  size="mini"
                >删除
                </el-button>
                <div
                  id="Ym_message"
                  class="msg"
                >
                  <span class="field-error" v-show="domainListShow">服务的域名信息列表不能为空</span>
                </div>
              </td>
            </tr>
            </tbody>
          </table>
        </td>
      </tr>
      </tbody>
    </table>
    <div class="myHeader">
      <div class="myHeader-title">
        占用机房信息
      </div>
    </div>
    <table
      width="100%"
      border="0"
      class="el-table el-table--border"
      cellspacing="0"
      cellpadding="0"
    >
      <tbody>
      <tr>
        <td
          width="200"
        >
          <label for="frameInfoId">机房下的机架信息</label>
          <span style="color: red">*</span>
        </td>
        <td>
          <el-select
            v-model="baseHousesHoldInfo.frameInfoId"
            v-validate="'required'"
            name="frameInfoId"
            id="frameInfoId"
          >
            <el-option
              v-for="[key,val] in baseFrameInfoMap"
              :value="key"
              :label="val"
              :key="key"
            ></el-option>
          </el-select>
          <div
            id="frameInfoId_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('frameInfoId:required')" v-if="baseFrameInfoMap.size > 0">请选择所属机房下机架</span>
            <span class="field-error" v-show="errors.has('frameInfoId:required')" v-if="baseFrameInfoMap.size === 0">请先选择所属经营单位</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <label>资源分配时间</label>
          <span style="color: red">*</span>
        </td>
        <td>
          <el-date-picker
            v-model="baseHousesHoldInfo.distributeTime"
            v-validate="'required'"
            id="distributeTime"
            name="distributeTime"
            type="date"
            placeholder="选择日期时间"
            size="small"
          >
          </el-date-picker>
          <div
            id="distributeTime_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('distributeTime:required')">请选择资源分配时间</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <label for="bandWidth">网络带宽</label>
        </td>
        <td>
          <el-input
            v-model="baseHousesHoldInfo.bandWidth"
            v-validate="'numeric|max:12'"
            name="bandWidth"
            id="bandWidth"
            maxlength="12"
            show-word-limit
          >
            <template slot="append">Mbps</template>
          </el-input>

          <div
            id="bandWidth_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('bandWidth:numeric')">{{ errors.first('bandWidth') }}</span>
            <span class="field-error" v-show="errors.has('bandWidth:max')">网络带宽长度最大为 12 位</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          IP地址转换信息
          <span style="color: red">*</span>
          <el-button
            @click="addBaseIpAddressInfo"
            type="primary"
            size="mini"
            id="add"
          >新增
          </el-button>
        </td>
        <td>
          <table
            border="0"
            class="el-table el-table--border"
            width="100%"
          >
            <tbody>
            <tr>
              <td>起始IP地址</td>
              <td>终止IP地址</td>
              <td v-if="baseCustomer.userType === 1">私网起始IP</td>
              <td v-if="baseCustomer.userType === 1">私网终止IP</td>
              <td
                v-if="baseCustomer.userType === 1"
                width="50%"
              ></td>
              <td
                v-if="baseCustomer.userType === 2"
                width="75%"
              ></td>
            </tr>
            <tr v-for="(baseIpTransInfo, index) in baseIpTransInfoSet">
              <td>
                <label>
                  <el-input
                    v-model="baseIpTransInfo.internetStartIp"
                    v-validate="'required|ip'"
                    :name="'internetStartIp_'+index"
                    placeholder="请填写起始 IP地址"
                    style="width: 150px;"
                  ></el-input>
                </label>
              </td>
              <td>
                <label>
                  <el-input
                    v-model="baseIpTransInfo.internetEndIp"
                    v-validate="'required|ip|checkIpArr'"
                    :name="'internetEndIp_'+index"
                    placeholder="请填写终止 IP地址"
                    style="width: 150px;"
                  ></el-input>
                </label>
              </td>
              <td v-if="baseCustomer.userType === 1">
                <label>
                  <el-input
                    v-model="baseIpTransInfo.privateStartIp"
                    v-validate="'ip'"
                    :name="'privateStartIp_'+index"
                    placeholder="请填写私网起始 IP地址"
                    style="width: 150px;"
                  ></el-input>
                </label>
              </td>
              <td v-if="baseCustomer.userType === 1">
                <label>
                  <el-input
                    v-model="baseIpTransInfo.privateEndIp"
                    v-validate="'ip|checkPrivateIpArr'"
                    :name="'privateEndIp_'+index"
                    placeholder="私网终止 IP地址"
                    style="width: 150px;"
                  ></el-input>
                </label>
              </td>
              <td
                align="left"
              >
                <el-button
                  @click="deleteBaseIpTransInfo(index)"
                  size="mini"
                  type="danger"
                  v-if="index !== 0"
                >删除
                </el-button>
                <div
                  :id="'internetStartIp'+index+'_message'"
                  class="msg"
                >
                  <span class="field-error" v-show="errors.has('internetStartIp_'+index+':required')">请填写起始 IP地址</span>
                  <span class="field-error" v-show="errors.has('internetStartIp_'+index+':ip')">{{ errors.first('internetStartIp_'+index) }}</span>
                </div>
                <div
                  :id="'internetEndIp'+index+'_message'"
                  class="msg"
                >
                  <span class="field-error" v-show="errors.has('internetEndIp_'+index+':required')">请填写终止 IP地址</span>
                  <span class="field-error" v-show="errors.has('internetEndIp_'+index+':ip')">{{ errors.first('internetEndIp_'+index) }}</span>
                  <span class="field-error" v-show="errors.has('internetEndIp_'+index+':checkIpArr')">[起始IP地址] 和 [终止IP地址] 必须在同一网段下（前三位相同），示例: [192.168.1.1, 192.168.1.255]</span>
                </div>
                <div
                  :id="'privateStartIp'+index+'_message'"
                  class="msg"
                >
                  <span class="field-error" v-show="errors.has('privateStartIp_'+index+':ip')">{{ errors.first('privateStartIp_'+index) }}</span>
                </div>
                <div
                  :id="'privateEndIp'+index+'_message'"
                  class="msg"
                >
                  <span class="field-error" v-show="errors.has('privateEndIp_'+index+':ip')">{{ errors.first('privateEndIp_'+index) }}</span>
                  <span class="field-error" v-show="errors.has('privateEndIp_'+index+':checkPrivateIpArr')">[私网起始IP地址] 和 [私网终止IP地址] 必须在同一网段下（前三位相同），示例: [192.168.1.1, 192.168.1.255]</span>
                </div>
              </td>
            </tr>
            </tbody>
          </table>
        </td>
      </tr>
      </tbody>
    </table>
    <div class="myHeader" v-if="baseCustomer.userType === 1">
      <div class="myHeader-title">
        虚拟主机信息
      </div>
    </div>
    <table
      v-if="baseCustomer.userType === 1"
      width="100%"
      border="0"
      class="el-table el-table--border"
      cellspacing="0"
      cellpadding="0"
      id="t_house"
    >
      <tbody>
      <tr>
        <td
          width="200"
        >
          <label for="virtualHostName">虚拟主机信息</label>
        </td>
        <td>
          <el-form label-width="130px">
            <el-form-item label="虚拟机主机名称:">
              <el-input
                v-model="baseHousesHoldInfo.virtualHostName"
                v-validate="'max:128'"
                name="virtualHostName"
                maxlength="128"
                show-word-limit
                id="virtualHostName"
                placeholder="请填写虚拟主机名称，没有请将主机名称清空"
              ></el-input>
            </el-form-item>
            <el-form-item label="虚拟机主机状态:">
              <el-select
                v-model="baseHousesHoldInfo.virtualHostState"
                id="virtualHostState"
              >
                <el-option
                  v-for="[k, v] in fieldFormatter.baseHousesHoldInfo.virtualHostStateMap"
                  :value="k"
                  :key="k"
                  :label="v"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="虚拟机主机类型:">
              <el-select
                v-model="baseHousesHoldInfo.virtualHostType"
                id="virtualHostType"
              >
                <el-option
                  v-for="[k, v] in fieldFormatter.baseHousesHoldInfo.virtualHostTypeMap"
                  :value="k"
                  :key="k"
                  :label="v"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div
            id="virtualHostName_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('virtualHostName:max')">虚拟主机信息长度最大为 128 位</span>
            <span class="field-error" v-show="vhNameShow">请填写虚拟主机名称（虚拟主机信息如有填写，均必填）</span>
          </div>
          <div
            id="virtualHostType_message"
            class="msg"
          >
            <span class="field-error" v-show="vhTypeShow">请选择虚拟主机类型（虚拟主机信息如有填写，均必填）</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <label for="virtualHostAddress">虚拟主机网络地址</label>
        </td>
        <td>
          <el-input
            v-model="baseHousesHoldInfo.virtualHostAddress"
            v-validate="'ip'"
            name="virtualHostAddress"
            id="virtualHostAddress"
            placeholder="请填写虚拟主机网络地址"
          ></el-input>
          <div
            id="virtualHostAddress_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('virtualHostAddress:ip')">{{ errors.first('virtualHostAddress') }}</span>
            <span class="field-error" v-show="vhAddressShow">请填写虚拟主机网络地址（虚拟主机信息如有填写，均必填）</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <label for="virtualHostManagement">虚拟主机管理地址</label>
        </td>
        <td>
          <el-input
            v-model="baseHousesHoldInfo.virtualHostManagement"
            v-validate="'ip'"
            name="virtualHostManagement"
            id="virtualHostManagement"
            placeholder="请填写虚拟主机管理地址"
          ></el-input>
          <div
            id="virtualHostManagement_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('virtualHostManagement:ip')">{{ errors.first('virtualHostManagement') }}</span>
            <span class="field-error" v-show="vhManagementShow">请填写虚拟主机管理地址（虚拟主机信息如有填写，均必填）</span>
          </div>
        </td>
      </tr>
      </tbody>
    </table>
    <div align="center">
      <el-button
        @click="updateBaseCustomer"
        type="primary"
      >
        确认
      </el-button>
      <el-button
        onclick="history.back()"
      >
        返回
      </el-button>
    </div>
  </div>
</div>
<div layout:fragment="js">
  <script src="/static/js/component/BaseValidateVue.js"></script>
  <script src="/static/js/module/basic-data/model/BaseCustomer.js"></script>
  <script src="/static/js/module/basic-data/model/BaseHouseInfo.js"></script>
  <script src="/static/js/module/basic-data/model/BaseHousesHoldInfo.js"></script>
  <script src="/static/js/module/basic-data/model/BaseServiceInfo.js"></script>
  <script src="/static/js/module/basic-data/model/BaseIpTransInfo.js"></script>
  <script src="/static/js/module/basic-data/api/baseCustomerApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseHouseInfoApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseFrameInfoApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseHouseOfficerApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseOperCompanyApi.js"></script>
  <script src="/static/js/module/basic-data/modify/admin_user_info_modify.js"></script>
</div>
</body>
</html>
